<template>
  <div>
    <el-dialog
      title="状态管理"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
      @close="close"
    >
      <div v-if="row" v-loading="loading">
        <div class="content">
          <div class="left">
            <div>活动名称：</div>
            <div>当前状态：</div>
          </div>
          <div class="right">
            <div>{{ row.theme }}</div>
            <div>
              <el-tag v-if="row.status===1" size="mini" type="success">启用中</el-tag>
              <el-tag v-if="row.status===2" size="mini" type="danger">已暂停</el-tag>
              <el-tag v-if="row.status===3" size="mini" type="info">已终止</el-tag>
            </div>
          </div>
        </div>

        <!-- 按钮 -->
        <div class="btn-group">
          <el-button v-if="row.status===1" type="primary" round size="small" @click="submit(2)">暂停活动</el-button>
          <el-button v-if="row.status===2" type="success" round size="small" @click="submit(1)">重启活动</el-button>
          <el-button
            v-if="row.status===1||row.status===2"
            type="danger"
            round
            size="small"
            @click="submit(3)"
          >终止活动</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { modifyActivityStatus } from '@/api/marketing'
export default {
  data() {
    return {
      // 配置
      resolve: null,
      reject: null,
      dialogVisible: null,
      statusOptions: ['', '启用', '暂停', '终止'],
      // 状态
      loading: false,
      // 数据
      row: ''
    }
  },
  methods: {
    open(row) {
      this.row = row
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.loading = false
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    /**
       * 按钮组
       */
    // 提交
    submit(status) {
      if (status == 3) {
        this.$confirm('活动一旦终止无法重启，是否确定要终止活动', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          roundButton: true
        })
          .then(() => {
            this.modify(status)
          })
          .catch(() => {
            return
          })
      } else {
        this.modify(status)
      }
    },

    modify(status) {
      this.loading = true
      const params = {}
      params.activityId = this.row.id
      params.status = status
      modifyActivityStatus(params)
        .then(res => {
          this.$notify({
            title: '成功',
            message: `${this.statusOptions[status]}成功`,
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.resolve && this.resolve()
          this.hide()
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .content {
    text-align: center;
  }
  .left {
    text-align: right;
    font-weight: bold;
  }
  .right {
    text-align: left;
  }
  .left,
  .right {
    display: inline-block;
    line-height: 40px;
  }
  .btn-group {
    margin: 20px 0;
    display: flex;
    justify-content: center;
  }
</style>
